﻿package ua.mihaylenko.cardsplugin.components.thumbs{
	import flash.display.Sprite;
	import flash.display.SimpleButton;
	import ua.mihaylenko.cardsplugin.components.cardeditor.ECEImage;
	import ua.mihaylenko.cardsplugin.data.*;
	import flash.events.MouseEvent;
	import flash.events.Event;
	import fl.transitions.Tween;
	import fl.transitions.TweenEvent;
	import fl.transitions.easing.Strong;
	import fl.transitions.easing.Bounce;
	import ua.mihaylenko.cardsplugin.data.DataThumb;
	import ua.mihaylenko.cardsplugin.utils.ToolTip;
	import ua.mihaylenko.cardsplugin.colorpicker.CPI;
	import ua.mihaylenko.cardsplugin.common.DocumentClass;
	
	public class ThumbNovigate extends Sprite
	{
		public  var _sbtRightNovigate:SimpleButton;
		public  var _sbtLeftNovigate:SimpleButton;
		public var _smcMask:Sprite;
		public var _smcThumbs:Sprite;
		//public var _sbttrans:Sprite;//not needed as mask clip is transparent gradient
		private var _oItemEvent:Object;
		private var _twShowHide:Tween;
		
		private static var _nThumbWidth:Number;
		private static var _nStageWidth:Number = 500.0;
		private static var _nStartPositionX:Number = 50;
		private var _bLeftNovigate:Boolean;
		private var _aItems:Array;
		public var _cThumbTooltip:ToolTip;
		private var _selectedItem:ThumbItem;
		public var _cImage:ECEImage;
		
		private var cpIcon;//instance of colour picker icon
		public var _cpX,_cpY;//co-ordinates of colour picker, it remembers where the colour picker was placed lastly
		
		// indicate whether the nav arrow buttons is pressing;
		private var pressingNavArrows:Boolean = false;
		
		public function ThumbNovigate()
		{
			//to mask transparent gradient mask
			_smcMask.cacheAsBitmap=true;
			_smcThumbs.cacheAsBitmap=true;
			_smcThumbs.mask=_smcMask;
			_cThumbTooltip = new ToolTip("Click to open this template.");
			_cThumbTooltip.attach(_smcThumbs);
		}
		public function onInitialaze(aThumbs:Array, cImage:ECEImage = null)
		{
			_aItems = new Array();
			_oItemEvent = new Object();
			_cImage = cImage;
			if (_cImage)
			{
				_cThumbTooltip.text = "Click to select image.";
			}
			else
			{
				_cThumbTooltip.text = "Click to open this template.";
			}
			
			while (_smcThumbs.numChildren)
			{
				_smcThumbs.removeChildAt(0);
			}
			
			//if the image tag has colourpicker attribute value as RGB,
			//create colourpicker icon class instance
			try{
				if(_cImage.colourpicker=="RGB"){
					var cpi=new CPI(this,_cImage);
					cpIcon=_smcThumbs.addChild(cpi);
				}
			}catch(e){}
			
			_selectedItem = null;
			
			for (var i:int = 0; i < aThumbs.length; i++)
			{
				var cThumb:ThumbItem = new ThumbItem(aThumbs[i], i);
				cThumb.x = 105+cThumb.width * i;
				if (!_nThumbWidth)
				{
					_nThumbWidth = cThumb.width;
				}
				if ( _cImage && i == _cImage.selectIndex) 
				{
					cThumb.select = true;
					_selectedItem = cThumb;
				}
				
				cThumb.AddListener(MouseEvent.CLICK, {_function:onItemClick, _object:this});
				cThumb.AddListener(MouseEvent.MOUSE_OVER, {_function:onItemOver, _object:this});
				cThumb.AddListener(MouseEvent.MOUSE_OUT, { _function:onItemOut, _object:this } );				
				_aItems.push(_smcThumbs.addChild(cThumb));				
			}
			
			_sbtRightNovigate.addEventListener(MouseEvent.MOUSE_OVER, clickOnRightNovigate);
			_sbtLeftNovigate.addEventListener(MouseEvent.MOUSE_OVER, clickOnLeftNovigate);
			
			_sbtRightNovigate.addEventListener(MouseEvent.MOUSE_OUT, stopUpdateNovigate);
			_sbtLeftNovigate.addEventListener(MouseEvent.MOUSE_OUT, stopUpdateNovigate);
			
			// register listener
			_sbtLeftNovigate.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDownNavArrowButton);
			_sbtRightNovigate.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDownNavArrowButton);
			_sbtLeftNovigate.addEventListener(MouseEvent.MOUSE_UP, onMouseUpNavArrowButton);
			_sbtRightNovigate.addEventListener(MouseEvent.MOUSE_UP, onMouseUpNavArrowButton);
		}
		
		// callback for mouse down on nav arrows
		private function onMouseDownNavArrowButton(evt:MouseEvent):void{
		    this.pressingNavArrows = true;
		}
		
		// callback for mouse up on nav arrows
		private function onMouseUpNavArrowButton(evt:MouseEvent):void{
		    this.pressingNavArrows = false;
		}
		
		private function stopUpdateNovigate(oEvent:MouseEvent)
		{
			if(this.hasEventListener(Event.ENTER_FRAME)){
				this.removeEventListener(Event.ENTER_FRAME, updateThumbsPosition);
			}
		}
		public function addListener(sEvent:String, oEvent:Object){
			_oItemEvent[sEvent] = oEvent;
		}
		private function clickOnRightNovigate(oEvent:MouseEvent){
			_bLeftNovigate = false;
			if(!this.hasEventListener(Event.ENTER_FRAME)){
				this.addEventListener(Event.ENTER_FRAME, updateThumbsPosition);
			}
		}
		private function clickOnLeftNovigate(oEvent:MouseEvent){
			_bLeftNovigate = true;
			if(!this.hasEventListener(Event.ENTER_FRAME)){
				this.addEventListener(Event.ENTER_FRAME, updateThumbsPosition);
			}
		}
		private function updateThumbsPosition(oEvent:Event){
			if(_bLeftNovigate){
				if(_smcThumbs.x < _smcMask.x +  _nThumbWidth*2){
					_smcThumbs.x += this.pressingNavArrows? 10 : 5;
				}else{
					this.removeEventListener(Event.ENTER_FRAME, updateThumbsPosition);
				}
			}else{
				if(_smcThumbs.x > -_smcThumbs.width + _smcMask.x +  _nThumbWidth*2){
					_smcThumbs.x -= this.pressingNavArrows? 10 : 5;
				}else{
					this.removeEventListener(Event.ENTER_FRAME, updateThumbsPosition);
				}
			}
		}
		private function onItemOver(cItem:ThumbItem){
			if(_oItemEvent[MouseEvent.MOUSE_OVER]){
				_oItemEvent[MouseEvent.MOUSE_OVER]._function.apply(_oItemEvent[MouseEvent.MOUSE_OVER]._object, [cItem.data]);
			}
//			var twOver:Tween = new Tween(cItem, "y",Bounce.easeInOut, 0, -cItem.height/3, 5);
		}
		private function onItemOut(cItem:ThumbItem){
			if(_oItemEvent[MouseEvent.MOUSE_OUT]){
				_oItemEvent[MouseEvent.MOUSE_OUT]._function.apply(_oItemEvent[MouseEvent.MOUSE_OUT]._object, [cItem.data]);
			}
			for(var i in _aItems){
				_aItems[i].close();
			}
		}
		
		private function onItemClick(cItem:ThumbItem) 
		{	
			//if the stock image is selected, the colourpicker icon
			//will get deselected, if it was selected before
			try{
				cpIcon.select=false;
			}catch(e){}
			
			
			if (_oItemEvent[MouseEvent.CLICK])
			{				
				_oItemEvent[MouseEvent.CLICK]._function.apply(_oItemEvent[MouseEvent.CLICK]._object, [cItem.data]);
			}
			else
			{	
				if ( _selectedItem )
				{
					if (_selectedItem == cItem) return;
					_selectedItem.select = false;
				}
				_selectedItem = cItem;
				_selectedItem.select = true;
				if (_cImage)
				{
					_cImage.selectIndex = _selectedItem.index;
				}
			}
		}
		
		public function get selectedItem():ThumbItem
		{
			return _selectedItem;
		}
		
		public function show(){
			if(_twShowHide){
				_twShowHide.stop();
				if(_twShowHide.hasEventListener(TweenEvent.MOTION_FINISH)){
					_twShowHide.removeEventListener(TweenEvent.MOTION_FINISH, close);
				}
			}
			this.visible = true;
//			_twShowHide = new Tween(this, "x", Back.easeInOut, -_nStageWidth, _nStartPositionX, 30, false);
			_twShowHide = new Tween(this, "alpha", Strong.easeInOut, 0, 1, 30, false);
			
		}
		public function hide()
		{
			if (this.hasEventListener(Event.ENTER_FRAME))
			{
				this.removeEventListener(Event.ENTER_FRAME, updateThumbsPosition);
			}
			if(_twShowHide){
				_twShowHide.stop();
			}
//			_twShowHide = new Tween(this, "x", Back.easeInOut, _nStartPositionX, -_nStageWidth, 30, false);
			_twShowHide = new Tween(this, "alpha", Strong.easeInOut, 1, 0, 30, false);
			_twShowHide.addEventListener(TweenEvent.MOTION_FINISH, close);
		}		
		public function close(oEvent:TweenEvent)
		{
			this.visible = false;
			_twShowHide.removeEventListener(TweenEvent.MOTION_FINISH, close);
		}
		
		public function resize(width:int):void
		{			
			_sbtRightNovigate.x = width + 30 - 44;
			//_sbttrans.width = width - 63;
			_smcMask.width = width - 64;
		}
		
		// show the select items, if not, show the first one
		public function showSelectedItem():void{
		    var targetPosition:Number = 0;
			if(this._selectedItem){
			    targetPosition = this._selectedItem.x;
			}
			
			_smcThumbs.x = _nThumbWidth - targetPosition;
			
		}
	}
}